<template>
<router-view @touchmove.prevent="stopEvent" />
<nav :class="navClass">
  <div>
    <el-scrollbar :always="true">
      <div ref="navDiv" class="linkDiv colFlex">
        <template v-for="(item, index) in menuMap" :key="item[1].type">

          <div class="levels rowFlex" v-if="item[1].mark != 'menu' && item[1].type == 'levels'" :name="item[1].ind.join()" :title="item[1].linkTex" :routName="item[0]">
            <span @click.stop="showChi(item[1].ind.join())">-</span>
            <span>{{ item[1].linkTex }}</span>
            <span class="rowFlex"></span>
          </div>

          <router-link class="links homeA" :to="{ name: item[0] , query: {vNum:queryN.vNum,geT:queryN.geT} }" v-if="item[1].mark == 'menu' && item[1].type == 'links'" :name="item[1].ind.join()" :title="item[1].linkTex" :routName="item[0]">
            {{ item[1].linkTex }}
          </router-link>

          <router-link class="links" :to="{ name: item[0] , query: {vNum:queryN.vNum} }" v-if="item[1].mark != 'menu' && item[1].type == 'links'" :name="item[1].ind.join()" :title="item[1].linkTex" :routName="item[0]">
            {{ item[1].linkTex }}
          </router-link>

        </template>
      </div>
    </el-scrollbar>
  </div>
</nav>
<span class="menu colFlex noselect" @click="showNav()">目录</span>

<footer class="rowFlex">
  <span class="copyRSpan">Copyright &copy; {{copyR}}</span>
  <span class="codeSourceSpan rowFlex"><a :href="codeSource" target=" _blank">源码下载</a></span>
  <span class="blogLinkSpan rowFlex"><a :href="blogLink" target=" _blank">博客链接</a></span>
  <span class="vNumSpan">版本号{{vNum}}</span>
</footer>
</template>

<script>
export default {
  data() {
    return {
      copyR: "观察蚂蚁的人",
      codeSource: "https://gitee.com/an-ant-watcher/componentsDIY.git",
      blogLink: "https://blog.csdn.net/weixin_44841138",
      menuMap: this.$router.options.menuMap,
      vNum: gData.vNum,
      queryN: {
        vNum: null,
        geT: null,
      },
      rout: null,
      isHome: false,
      navClass: ["noselect", "rowFlex"],
    };
  },
  mounted() {
    this.autoCreatNav();
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        "vNum" in val.query && (this.queryN.vNum = val.query.vNum);
        "geT" in val.query && (this.queryN.geT = val.query.geT);
        if (val.name) {
          this.isHome = (this.menuMap.get(val.name).mark == "menu")
          if (this.rout == null) { //组件加载
            this.isHome && this.showNav();
          } else {
            this.showNav();
          }
          this.rout = val;
        }
      },
      deep: true, // 深度观察监听
      immediate: true //加载时立即执行
    }
  },
  methods: {
    stopEvent(e) {
      e.preventDefault();
    },
    showChi(names, mod) {
      let ele = document.getElementsByName(names)[0];
      let spans = document.querySelectorAll(`*[name="${names}"]>span`);
      let heights, widths;

      spans[2].style.transition = "none 0s";
      spans[2].style.maxHeight = null;
      spans[2].style.maxWidth = null;

      this.$nextTick(async () => { //在下次DOM更新循环结束之后执行延迟回调
        heights = spans[2].offsetHeight;
        widths = spans[2].offsetWidth;

        if (spans[0].innerHTML == "-") {
          spans[0].innerHTML = "+";
          spans[2].style.maxHeight = heights + "px";
          spans[2].style.maxWidth = widths + "px";

          await globalFnWP.waits(0);
          //有动画过程的
          mod != "static" && (spans[2].style.transition = "max-height 0.5s ease-in-out, max-width  0.1s 0.4s ease-in-out");
          spans[2].style.maxHeight = 0;
          spans[2].style.maxWidth = 0;
          ele.style.borderColor = "transparent";

          await globalFnWP.waits(500);
        } else {
          spans[0].innerHTML = "-";
          spans[2].style.maxHeight = 0;
          spans[2].style.maxWidth = 0;

          await globalFnWP.waits(0);
          //有动画过程的
          mod != "static" && (spans[2].style.transition = null);
          spans[2].style.maxHeight = heights + "px";
          spans[2].style.maxWidth = widths + "px";
          ele.style.borderColor = null;

          await globalFnWP.waits(500);
          //释放maxHeight和maxWidth，允许resize时元素根据这两个属性重排
          spans[2].style.maxHeight = null;
          spans[2].style.maxWidth = null;

        }
        mod == "static" && (spans[2].style.transition = null);
      });

      //父级的max-height释放
      let pa = ele;
      while (pa) {
        pa = this.findPa(pa);
        if (!pa) {
          break;
        }
        pa.children[2].style.maxHeight = null;
      }
    },
    async autoCreatNav() {
      let navDiv = this.$refs.navDiv;
      let ele, pa, paInd, spans, tmpRootLen, showLev, names;
      navDiv.style.display = "none";

      for (let i = 0; i < navDiv.children.length; i++) {
        tmpRootLen = navDiv.children.length;
        ele = navDiv.children[i];
        names = ele.getAttribute("name");

        showLev = this.menuMap.get(ele.getAttribute("routName")).showLev;

        showLev == false && this.showChi(names, "static"); //按初始展开状态

        pa = this.findPa(ele);
        pa && pa.children[2].append(ele); //将子级写入父级

        //i随着navDiv的子长变化调整
        i -= tmpRootLen - navDiv.children.length;
      }

      await globalFnWP.waits(0);
      navDiv.style.display = null;

    },
    findPa(chi) {
      let paInd = chi.getAttribute("name").split(",").concat();
      let pa;
      if (paInd.length > 1) {
        paInd.pop();
        pa = document.getElementsByName(paInd.join())[0];
      }
      return pa;
    },
    showNav() {
      let classInd = this.navClass.indexOf("showNav");
      if (this.isHome) {
        if (this.navClass.indexOf("transition") < 0) {
          classInd = this.navClass.indexOf("showNav");
          if (classInd < 0) {
            this.navClass.push("showNav");
          }
        }
      } else if (classInd < 0) {
        this.navClass.push("transition");
        setTimeout(() => {
          this.navClass.push("showNav");
        }, 0);
        setTimeout(() => {
          classInd = this.navClass.indexOf("transition");
          this.navClass.splice(classInd, 1);
        }, 300);
      } else {
        this.navClass.push("transition");
        this.navClass.splice(classInd, 1);
        setTimeout(() => {
          classInd = this.navClass.indexOf("transition");
          this.navClass.splice(classInd, 1);
        }, 300);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$menuSize: 3.7rem;

.menu {
  position: absolute;
  width: $menuSize;
  height: $menuSize;
  top: 0;
  right: 0;
  z-index: 1;

  box-shadow: 0 0 1rem rgb(205, 230, 255);
  border-radius: 0 $menuSize * 0.5;
  background: radial-gradient(white 24%,
      rgb(205, 230, 255) 53%,
      transparent 57%,
      rgb(205, 230, 255) 70%);

  color: $colorT;
  font-size: 1rem;
  line-height: 1rem;
  letter-spacing: -0.7px;

  cursor: pointer;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);

  &:active {
    transform: scale(1.1) translate(-$menuSize * 0.05, $menuSize * 0.05);
  }
}

.showNav {
  opacity: 1;
  z-index: 1;
}

.transition {
  transition: all 0.3s;
}

nav {
  position: absolute;
  width: 100vw;
  height: $vh;
  overflow: hidden;

  top: 0;
  left: 0;

  z-index: -1;
  background: $darkBg;

  opacity: 0;
}

nav ::v-deep .el-scrollbar__wrap {
  position: relative;
}

.linkDiv {
  position: relative;
  overflow: visible;
  max-width: 900px;

  align-items: flex-start;
}

.levels {
  min-width: 100%;
  color: $gray;
  font-size: 1.2rem;
  text-align: center;

  flex-flow: row wrap;
  justify-content: flex-start;

  border-radius: 0.37rem;
  padding: 0 0 12px 3.1%;
  box-sizing: border-box;

  margin: 0.5rem 0;
  /*使用怪异盒子模型+padding，不用margin，避免出现横向滚动条*/

  border: solid 1px skyblue;
  border-style: none none solid solid;

  &>span:nth-of-type(1) {
    width: 1.2rem;
    font-size: 1.2rem;
    cursor: pointer;
  }

  &>span:nth-of-type(2) {
    width: calc(100% - 1.7rem);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &>span:nth-of-type(3) {
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: hidden;

    flex-flow: row wrap;
    justify-content: flex-start;

    transition: max-height 0.5s ease-in-out, max-width 0.1s ease-in-out;
  }
}

.links {
  width: 7rem;
  color: $colorL;
  font-size: 1.14rem;
  text-shadow: 0 0 1rem whitesmoke;
  text-align: center;
  overflow: hidden;
  margin: 0.5rem 0;

  border-radius: 0.37rem;

  white-space: nowrap;
  text-overflow: ellipsis;

  &.router-link-exact-active {
    color: darkorange;
    text-shadow: 0 0 0.7rem white;
  }
}

.homeA {
  width: 12rem;
  font-size: 1.1rem;
  color: $colorTheme;
  text-align: left;
  letter-spacing: 0.5px;
}

@media all and (orientation: landscape) {
  nav ::v-deep .el-scrollbar__wrap {
    max-width: calc(100vw - #{$menuSize}*2);
    max-height: calc(#{$vh} - #{$menuSize});
  }
}

@media all and (orientation: portrait) {
  nav ::v-deep .el-scrollbar__wrap {
    max-width: calc(100vw - #{$menuSize});
    max-height: calc(#{$vh} - #{$menuSize}*2);
  }
}

footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left:0;
  font-size: 12px;
  z-index: 1;
  padding: 2.4px 7px;
  box-sizing: border-box;

  flex-flow: row wrap;
  justify-content: center;

  color: $colorL;
  text-align: center;

  background: $mainBg;

  caret-color:transparent;    //光标颜色

  & span {
    margin: 0 3px;
  }

  & a {
    color: $colorL;
    text-decoration: underline;
  }

}

@media screen and (max-height: 500px) {
  footer {
    display: none;
  }
}
@media screen and (max-width: 300px) {
  footer {
    display: none;
  }
}
</style>
